<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换肤效果基础篇</title>
    <style> 
       div{
           width: 30px;
           height: 30px;
           margin: 10px 3px;
           padding: 0;
           float: left;
           /*color:peachpuff*/
         
       }
    </style>
</head>
<body>
   <!--<main>   
       <header>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
       </header>
   </main>-->
</body>
</html>
 <script>
    document.body.style.margin='0'
    document.body.style.backgroundColor='peachpuff'
    var main = document.createElement('main');
    var header = document.createElement('header')
    var div1 = document.createElement('div'); 
    var div2 = document.createElement('div')
    var div3 = document.createElement('div')
    var div4 = document.createElement('div')

    document.body.appendChild(main)
    main.appendChild(header)
    header.appendChild(div1)
    header.appendChild(div2)
    header.appendChild(div3)
    header.appendChild(div4)
    
    header.style.height = '50px'
    header.style.width  = '100%'
    header.style.backgroundColor='black'
    // header.style.lineHeight = '50px'
    
    div1.style.backgroundColor = 'red'
    div2.style.backgroundColor = 'fuchsia'
    div3.style.backgroundColor = 'green'
    div4.style.backgroundColor = 'yellow'

    div1.type = "button";
    div2.type = "button";
    div3.type = "button";
    div4.type = "button";

    div1.onclick=function(){
      document.body.style.backgroundColor='red'
    }
    div2.onclick= function(){
        document.body.style.backgroundColor='fuchsia'
    }
    div3.onclick=function(){
        document.body.style.backgroundColor='green'
    }
    div4.onclick=function(){
        document.body.style.backgroundColor='yellow'
    }

    // function chengeColor(anniu){
    //   if(anniu==1){
    //       main.style.backgroundColor = 'red'
    //   }
    //   else{
    //       if(anniu==2){
    //           main.style.backgroundColor = 'red'
    //       }
    //        if(anniu==3){
    //           main.style.backgroundColor = 'fuchsia'
    //       }
    //         if(anniu==4){
    //           main.style.backgroundColor = 'green'
    //       }
    //       else{
    //           main.style.backgroundColor = 'yellow`'
    //       }
    //   }
        
    // }
    // function Change1(){
        
    // }
    //  function Change2(){
    //     document.body.style.backgroundColor='fuchsia'
    // }
    //  function Change3(){
    //     document.body.style.backgroundColor='green'
    // }
    //  function Change4(){
    //     document.body.style.backgroundColor='yellow'
    // }
</script>